<template>
  <div style="background:#ddd">
    <header 
      class="mint-header" 
      style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button 
          class="mint-button mint-button--default mint-button--normal" 
          style="font-size: 15px;" 
          @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">详情页</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px" /> -->
    <div style="width:95%;margin:10px auto 0">
      <div v-if="$route.query.atype=='0106'">
        <div v-if="weixiudata.hash">
          <mt-cell 
            :value="weixiudata.hash.content" 
            title="维修内容" />
          <mt-cell 
            :value="yixuan.managenum" 
            title="已选设备" />
          <mt-cell 
            :value="weixiudata.hash.detypename" 
            title="处理方式" />
          <mt-cell 
            :value="weixiudata.hash.examinetime" 
            title="申请时间" />
          <mt-cell 
            :value="weixiudata.hash.amount" 
            title="申请金额" />
          <mt-cell 
            :value="weixiudata.hash.bigamount" 
            title="大写金额" />
          <mt-cell 
            :value="weixiudata.hash.shop" 
            title="服务商家" />
          <mt-cell 
            :value="weixiudata.hash.beizhu" 
            title="维修备注" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">

              <img 
                :src="item.hash.fileurl" 
                style="width:10px%;height:48px;display:block" 
                @click="viewAttachments(item)">
            </span>
          </mt-cell>
        </div>
      </div>
      <div v-else-if="$route.query.atype=='0105'">
        <div v-if="waichudata.hash">
          <mt-cell 
            :value="waichudata.hash.branchname" 
            title="申请部门" />
          <!--<mt-cell title="申请开始时间" :value="waichudata.hash.examinetime"></mt-cell>
          <mt-cell title="申请结束时间" :value="waichudata.hash.examinetime"></mt-cell>-->
          <!-- <mt-cell title="时长(天)" :value="waichudata.hash.examinetime"></mt-cell> -->
          <mt-cell 
            :value="waichudata.hash.address" 
            title="外出地点" />
          <mt-cell 
            :value="waichudata.hash.detail" 
            title="外出事由" />
          <mt-cell 
            :value="waichudata.hash.userdetail" 
            title="参加人员" />
          <div class="time-wc">
            <div>申请时间:</div>
            <div 
              v-for="(item, index) in waichudate" 
              :key="index" 
              style="padding-left: 10px">
              <div>
                <span>开始时间</span>
                <span class="time-date">
                  {{ item.hash.starttime }}
                  <span v-if="item.hash.startinterval=='1'">上午</span>
                  <span v-else>下午</span>
                </span>
              </div>
              <div>
                <span>结束时间</span>
                <span class="time-date">
                  {{ item.hash.endtime }}
                  <span v-if="item.hash.endinterval=='1'">上午</span>
                  <span v-else>下午</span>
                </span>
              </div>
              <div>
                时长(天):
                <span class="time-date">{{ item.hash.leavedetailnum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="$route.query.atype=='0103'">
        <div v-if="qingjiadata.hash">
          <mt-cell 
            :value="qingjiadata.hash.typename" 
            title="请假类型" />
          <div class="time-wc">
            <div>请假时间:</div>
            <div 
              v-for="(item, index) in qingjiadate" 
              :key="index" 
              style="padding-left: 10px">
              <div>
                <span>开始时间</span>
                <span class="time-date">
                  {{ item.hash.starttime }}
                  <span v-if="item.hash.startinterval=='1'">上午</span>
                  <span v-else>下午</span>
                </span>
              </div>
              <div>
                <span>结束时间</span>
                <span class="time-date">
                  {{ item.hash.endtime }}
                  <span v-if="item.hash.endinterval=='1'">上午</span>
                  <span v-else>下午</span>
                </span>
              </div>
              <div>
                时长(天):
                <span class="time-date">{{ item.hash.leavedetailnum }}</span>
              </div>
            </div>
          </div>
          <mt-cell 
            :value="qingjiadata.hash.leavedetail" 
            title="请假原因" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">
              <img 
                :src="item.hash.fileurl" 
                style="width:10px%;height:48px;display:block" 
                @click="viewAttachments(item)">
            </span>
          </mt-cell>
        </div>
      </div>
      <div v-else-if="$route.query.atype=='0102'">
        <div v-if="zijindata.hash">
          <mt-cell 
            :value="zijindata.hash.capitaltypename+'-'+zijindata.hash.childcapitaltypename" 
            title="请款类型" />
          <mt-cell 
            :value="zijindata.hash.branchname" 
            title="用款部门" />
          <mt-cell 
            :value="zijindata.hash.examinetime" 
            title="申请时间" />
          <mt-cell 
            :value="zijindata.hash.amount" 
            title="申请金额(元)" />
          <mt-cell 
            :value="zijindata.hash.bigamount" 
            title="大写金额" />
          <mt-cell 
            :value="zijindata.hash.detail" 
            title="资金用途" />
          <mt-cell 
            :value="zijindata.hash.beizhu" 
            title="资金备注" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">
              <img 
                :src="item.hash.fileurl" 
                style="width:10px%;height:48px;display:block" 
                @click="viewAttachments(item)">
            </span>
          </mt-cell>
        </div>
      </div>

      <div v-else-if="$route.query.atype=='0107'">
        <div v-if="contractData.hash">
          <mt-cell 
            :value="contractData.hash.contracttitle" 
            title="合同名称" />
          <mt-cell 
            :value="contractData.hash.contracttype" 
            title="合同类型" />
          <mt-cell 
            :value="contractData.hash.contractnumber" 
            title="合同编号" />
          <mt-cell 
            :value="contractData.hash.contractdate" 
            title="签约日期" />
          <mt-cell 
            :value="contractData.hash.contractamount" 
            title="合同总金额" />
          <mt-cell 
            :value="contractData.hash.contractpeople" 
            title="我方签约人员" />
          <mt-cell 
            :value="contractData.hash.contractdes" 
            title="合同简介" />
          <mt-cell 
            :value="contractData.hash.beizhu" 
            title="备注" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">
              <img 
                v-if="item.hash.fileurl.indexOf('.png')>0 || item.hash.fileurl.indexOf('.jpg')>0" 
                :src="item.hash.fileurl" 
                style="height:48px;display:block" 
                @click="viewAttachments(item)">
              <a 
                v-else 
                :href="item.hash.fileurl" 
                download>{{ item.hash.filename }}</a>
            </span>
          </mt-cell>
        </div>
      </div>

      <div v-else-if="$route.query.atype=='0104'">
        <div v-if="cweixiudata.hash">
          <mt-cell 
            :value="cweixiudata.hash.branch" 
            title="申请部门" />
          <mt-cell 
            :value="cweixiudata.hash.examintime" 
            title="申请时间" />
          <mt-cell 
            :value="cweixiudata.hash.carno" 
            title="车牌照号" />
          <mt-cell 
            :value="cweixiudata.hash.mileage" 
            title="公里数(km)" />
          <mt-cell 
            :value="cweixiudata.hash.amount" 
            title="申请金额(元)" />
          <mt-cell 
            :value="cweixiudata.hash.bigamount" 
            title="大写金额" />
          <mt-cell 
            :value="cweixiudata.hash.code" 
            title="申请项目" />
          <mt-cell 
            :value="cweixiudata.hash.address" 
            title="维修地点" />
          <mt-cell 
            :value="cweixiudata.hash.detail" 
            title="维修明细" />
          <mt-cell 
            :value="cweixiudata.hash.beizhu" 
            title="维修备注" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">
              <img 
                :src="item.hash.fileurl" 
                style="width:10px%;height:48px;display:block" 
                @click="viewAttachments(item)">
            </span>
          </mt-cell>
        </div>
      </div>
      <div v-else-if="$route.query.atype=='0101'">
        <div v-if="baoxiaodata.hash">
          <div class="time-wc">
            <div style="line-height:48px;">报销种类:</div>
            <div 
              v-for="(item, index) in baoxiaozhonglei" 
              :key="index" 
              style="padding-left: 10px">
              <div style="color:#666;border:1px solid #666;border-bottom:0">
                <mt-cell 
                  :value="item.hash.mounttypename" 
                  title="报销种类" />
                <mt-cell 
                  :value="item.hash.childmounttypename" 
                  title="报销子类" />
                <mt-cell 
                  :value="item.hash.amount" 
                  title="报销金额" />
                <mt-cell 
                  :value="item.hash.branchname" 
                  title="报销部门" />
              </div>
            </div>
          </div>
          <mt-cell 
            :value="baoxiaodata.hash.content" 
            title="报销内容" />
          <mt-cell 
            :value="baoxiaodata.hash.examinetime" 
            title="报销时间" />
          <mt-cell 
            :value="baoxiaodata.hash.amountsum" 
            title="总金额(元)" />
          <mt-cell 
            :value="baoxiaodata.hash.bigamountsum" 
            title="大写金额" />
          <mt-cell 
            :value="baoxiaodata.hash.paytypename" 
            title="支付方式" />
          <mt-cell 
            :value="baoxiaodata.hash.filenumber" 
            title="附件数量" />
          <mt-cell 
            :value="baoxiaodata.hash.beizhu" 
            title="报销备注" />
        </div>
        <div 
          v-if="filesrc" 
          style="width:100%;min-height:48px;line-height:48px;">
          <mt-cell 
            v-for="(item, index) in filesrc" 
            :key="index" 
            title="附件">
            <span style="display:inline-block;width:200px;">
              <img 
                v-if="item.hash.fileurl.indexOf('.png')>0 || item.hash.fileurl.indexOf('.jpg')>0" 
                :src="item.hash.fileurl" 
                style="height:48px;display:block" 
                @click="viewAttachments(item)">
              <a 
                v-else 
                :href="item.hash.fileurl" 
                download>{{ item.hash.filename }}</a>
            </span>
          </mt-cell>
        </div>
      </div>

      <div 
        v-if="$route.query.status=='1'&&ismy=='1'" 
        style="text-align:center;background:#fff;padding-bottom:5px">
        <mt-button 
          type="primary" 
          style="width:31%" 
          @click="weituoinfo()">委托</mt-button>
        <mt-button 
          type="danger" 
          style="width:31%" 
          @click="bohuiinfo()">驳回</mt-button>
        <mt-button 
          style="width:31%;background:#67C23A;color:#fff" 
          @click="testbt">通过</mt-button>
      </div>
      <div style="height:50px;" />
    </div>
    <mt-popup 
      v-model="popupVisible1" 
      popup-transition="popup-fade">
      <div style="width:200px;">
        <img 
          src="../static/jilu.png" 
          alt 
          style="width:100%">
      </div>
    </mt-popup>

    <mt-popup 
      v-model="popupVisible2" 
      popup-transition="popup-fade">
      <div style="width:100%">
        <div style="font-size:16px;font-weight:bold;text-align:center;line-height:40px">
          <span v-if="wb==1">委托</span>
          <span v-else>驳回</span>
        </div>
        <div v-if="wb==1">
          <mt-field 
            v-model="enstrustuser" 
            label="委托人" 
            placeholder="请输入委托人" />
        </div>
        <div v-else>
          <mt-radio 
            v-model="value1" 
            :options="weituooptionss" 
            title="拨回至:" />
          <mt-radio 
            v-if="value1=='1'" 
            v-model="value2" 
            :options="weituooptionss2" 
            title="选择驳回人：" />
          <mt-field 
            v-model="reason" 
            label="驳回原因" 
            placeholder="请输入驳回原因" />
        </div>
        <div 
          v-if="wb==1" 
          style="text-align:center;margin-bottom:5px">
          <mt-button 
            type="primary" 
            style="width:48%" 
            @click="popupVisible2=false">取消</mt-button>
          <mt-button 
            type="primary" 
            style="width:48%" 
            @click="definewt">确定</mt-button>
        </div>
        <div 
          v-else 
          style="text-align:center;margin-bottom:5px">
          <mt-button 
            type="primary" 
            style="width:48%" 
            @click="popupVisible2=false">取消</mt-button>
          <mt-button 
            type="primary" 
            style="width:48%" 
            @click="bohuibt">确定</mt-button>
        </div>
      </div>
    </mt-popup>
    <mt-popup 
      v-model="popupVisible7" 
      popup-transition="popup-fade" 
      style="width:80%">
      <div v-if="img">
        <span style="display:inline-block;width:100%;">
          <img 
            :src="img" 
            alt 
            style="width:100%;height:500px;display:block" 
            @click="popupVisible7=false">
        </span>
      </div>
      <div 
        v-else 
        style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      weixiudata: {},
      baoxiaodata: {},
      filesrc: [],
      contractData: {},
      cweixiudata: {},
      img: '',
      zijindata: {},
      qingjiadata: {},
      popupVisible7: false,
      qingjiadate: [],
      waichudata: {},
      waichudate: [],
      baoxiaozhonglei: [],
      value1: '',
      yixuan: {},
      value2: '',
      id: '',
      enstrustuser: '',
      reason: '',
      ts: this.newStore(),
      popupVisible2: false,
      popupVisible1: false,
      htitle: '详情页',
      username: '',
      wb: 0,
      atype: '',
      lastinfo: [],
      filereim: [],
      weituooptionss: [
        {
          label: '申请人',
          value: '0'
        },
        {
          label: '上一级',
          value: '-1'
        },
        {
          label: '选择驳回人',
          value: '1',
          disabled: false
        }
      ],
      selected: '1',
      selected3: '2',
      spjl: {}
    }
  },
  watch: {
    value1() {
      this.value2 = ''
    }
  },
  created() {},
  mounted() {
    if (this.$route.query.selected) {
      this.selected = this.$route.query.selected
    }
    if (this.$route.query.selected2) {
      this.selected2 = this.$route.query.selected2
    }
    if (this.$route.query.selected3) {
      this.selected3 = this.$route.query.selected3
    }
    this.lastinfo = this.$route.query.name
    this.atype = this.$route.query.atype
    this.ismy = this.$route.query.ismy
    if (this.atype == '0103') {
      this.getqingjialist()
    }
    if (this.atype == '0106') {
      this.getweixiulist()
    }
    if (this.atype == '0105') {
      this.getwaichulist()
    }
    if (this.atype == '0102') {
      this.getzijinlist()
    }
    if (this.atype == '0104') {
      this.getcweixiulist()
    }
    if (this.atype == '0101') {
      this.getbaoxiaolist()
    }
    if (this.atype == '0107') {
      this.getcontractlist()
    }

    this.getbohuoperson()
    this.getsljl()
  },
  methods: {
    getsljl() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF5DDF49381938997FFE9CFC209D07C85490D67199A7471506',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.spjl = ts.d.data.operation1
      })
    },

    //获得设备维修数据
    getweixiulist() {
      const req = {
        handle:
          '9DEA590540016AF56AA8E4B54801438BB3F2193D08E31332D5E5601D2F82C2E672B5B64895E2F11C',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.weixiudata = ts.d.data.operation1[0]
        this.filesrc = ts.d.data.operation2
        this.yixuan = ts.d.data.operation3[0].hash
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    option() {
      this.$router.push({
        name: 'approval',
        query: {
          selected: this.selected,
          selected2: this.selected2,
          selected3: this.selected3
        }
      })
    },
    //获得外出审批数据
    getwaichulist() {
      const req = {
        handle:
          '06BBA4638D6221E7C94D5152B4CB8D877A1F05FDC4A221F3FC134F422ABAA2D3DADB28EFE659DCF9',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.waichudata = ts.d.data.operation1[0]
        this.waichudate = ts.d.data.operation2
        this.filesrc = ts.d.data.operation3
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    //获得请假信息
    getqingjialist() {
      const req = {
        handle: 'BD6A960AF46EE09F9C5B42D1658B3CCCA5A715B191607392',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.qingjiadata = ts.d.data.operation1[0]
        this.qingjiadate = ts.d.data.operation2
        this.filesrc = ts.d.data.operation3
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    //获取资金信息
    getzijinlist() {
      const req = {
        handle:
          '40236578C287949E983CF935CC2173FE347A69929FDF7F2FE251F12C1C7E6A4B0FE3786F0F962D11',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.zijindata = ts.d.data.operation1[0]
        console.log(this.filesrc, 'this.zijingdata')
        this.filesrc = ts.d.data.operation2
        console.log(this.filesrc, 'this.zijingdata')
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    //获取车辆维修信息
    getcweixiulist() {
      const req = {
        handle:
          '27C5BBCC57742906E0FD67DAD8D2622896D1E3093AF33DA156AD69D48355AA75947C61655EDF54FA',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.cweixiudata = ts.d.data.operation1[0]
        console.log(this.cweixiudata, 'this.cweixiufdata')
        this.filesrc = ts.d.data.operation2
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    //获取合同审批信息
    getcontractlist() {
      const req = {
        handle:
          '09D3B9E20F101E11CD5ED14F3DA05EF7E5F8A7980C727D360C5596A61637D2F6FC5D937ABF463C840FE3786F0F962D11',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.contractData = ts.d.data.operation1[0]
        console.log(this.contractData, 'this.contractData')
        this.filesrc = ts.d.data.operation2
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },

    //获取报销信息
    getbaoxiaolist() {
      const req = {
        handle:
          '0398B14C0EC6F01867D31307B7D9BCF99F9190F74AA3A4C7C5EECFEA4B2A82E4BFF0B9210751F692',
        aid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.baoxiaodata = ts.d.data.operation1[0]
        console.log(this.baoxiaodata, 'this.baoxiaodata')
        this.baoxiaozhonglei = ts.d.data.operation2
        this.filesrc = ts.d.data.operation3
        console.log(this.filesrc, 'this.filesrc')
        console.log(this.baoxiaozhonglei, 'this.boxiaozhonglei ')
        if (ts.d.data.operation1.length > 0) {
          this.id = ts.d.data.operation1[0].hash.aid
        }
      })
    },
    viewAttachments(item) {
      this.img = item.hash.fileurl
      this.popupVisible7 = true
    },
    //weituo
    weituoinfo() {
      this.wb = 1
      this.popupVisible2 = true
    },
    //bohui
    bohuiinfo() {
      this.wb = 2
      this.popupVisible2 = true
    },
    //获取驳回人
    getbohuoperson() {
      const req3 = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF8F3C0B2702AA820C227FEB5A2E535EB8ACEF8AE5E24D532D',
        approvalid: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req3).then(ts3 => {
        this.splselect = ts3.d.data.operation1
        this.weituooptionss2 = []
        for (let i = 0; i < this.splselect.length; i += 1) {
          let a = {}
          a.value = this.splselect[i].hash.approval_user
          a.label = this.splselect[i].hash.username
          this.weituooptionss2.push(a)
        }
        console.log(this.splselect, '2222')
        if (this.splselect.length == 0) {
          this.weituooptionss[2].label = '暂无可选驳回人'
          this.weituooptionss[2].disabled = true
        } else {
          this.weituooptionss[2].label = '选择驳回人'
          this.weituooptionss[2].disabled = false
        }
      })
    },
    //驳回
    bohuibt() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF8840DAE4ED8972735532B597DC457CE9',
        approvalid: this.id,
        backordernum: '-1',
        reason: this.reason
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.$messagebox('提示', '驳回成功').then(action => {
            this.$router.push({
              name: 'approval',
              query: {
                name: '审批流程'
              }
            })
          })
        }
      })
    },
    //委托
    definewt() {
      if (this.value1 == '1') {
        res = {
          handle:
            '9000B8B8D347526960C5BAB1FB6894EF8840DAE4ED8972735532B597DC457CE9',
          approvalid: this.$route.query.id,
          backordernum: this.value2,
          reason: this.reason
        }
      } else {
        res = {
          handle:
            '9000B8B8D347526960C5BAB1FB6894EF8840DAE4ED8972735532B597DC457CE9',
          approvalid: this.$route.query.id,
          backordernum: this.value1,
          reason: this.reason
        }
      }

      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.popupVisible2 = false
          this.$route.push({ name: 'approval', query: { name: '审批流程' } })
        }
      })
    },
    //tongguo
    testbt() {
      // this.$route.push({ name: 'approval', query: { name: '审批流程' } })
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF8840DAE4ED897273FB8FE1B9930A2314',
        approvalid: this.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.$messagebox('提示', '通过成功').then(action => {
            this.$router.push({
              name: 'approval',
              query: {
                name: '审批流程'
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.mint-cell-value input {
  text-align: right;
}
.mint-popup {
  width: 95%;
}
.mint-cell-value {
  max-width: 260px;
}
.time-wc {
  background: #fff;
  font-size: 16px;
  padding: 0 10px;
  min-height: 48px;
  line-height: 31px;
  border-top: 1px solid #ddd;
}
.time-date {
  display: inline-block;
  float: right;
  color: #888;
}
.mint-cell-value {
  color: #999 !important;
}
</style>
